<style>
    .ly-table-layout .ly-table-layout-top {
        margin-bottom: 20px;
    }

    .ly-table-layout .el-form .el-button {
        color: #FFF;
        background-color: var(--primary);
        border-color: var(--primary);
        font-size: 12px;
        border-radius: 3px;
        padding: 9px 15px;
    }

    .ly-pagination-border:not(.fixed-bottom) {
        border-left: 1px solid #E6E6E6;
        border-right: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
    }

    .ly-pagination-action {
        display: inline-block;
        text-align: center;
        margin-right: 10px;
    }

    .ly-table-header span.el-checkbox__inner {
        padding: 0!important;
    }
</style>
<template>
    <div class="pagination" v-if="!(hideOnSinglePage&&store.data.length>=store.total)"
         :class="{'ly-pagination-border':border}">
        <div class="action">
            <div class="ly-pagination-action" :style="{width:selectionWidth+'px'}">
                <el-checkbox ref="for_header" class="pagination-check" v-if="selection" style="display: none"
                             :indeterminate="isIndeterminate"
                             v-model="checked" @change="handleCheckAllChange"></el-checkbox>
                <el-checkbox class="pagination-check" v-if="selection" style="" :indeterminate="isIndeterminate"
                             v-model="checked" @change="handleCheckAllChange"></el-checkbox>
            </div>
            <slot></slot>
        </div>
        <el-pagination
                background
                :page-size="store.params.step"
                @size-change="store.sizeChange($event)"
                @current-change="store.load($event)"
                :current-page="store.params.page"
                :page-sizes="store.page_sizes"
                :layout="layout"
                :total="store.total">
        </el-pagination>
        <div class="clear"></div>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-pagination',
            props: {
                store: {},
                checkAll: Boolean,
                "hideOnSinglePage": Boolean,
                layout:{
                    type:String,
                    default:'total,sizes,prev, pager, next, jumper'
                }
            },
            mounted: function () {
                var me = this;
                var index = this.$parent.$children.indexOf(this);
                if (index > 0) {
                    var table = this.$parent.$children[index - 1];
                    if (table.$options._componentTag == 'el-table') {
                        me.border = table.border;
                        table.$on('selection-change', function () {
                            me.isIndeterminate = table.selection.length != 0 && table.selection.length != table.data.length;
                            me.checked = table.selection.length == table.data.length;
                        });
                        if ('selection' == table.$children[0].type) {
                            me.selection = true;
                            me.selectionWidth = table.$children[0].width;
                        }
                    } else if (table.$options._componentTag == 'ly-table' && this.checkAll) {
                        me.border = table.border;
                        me.selection = true;
                        this.store.onSelectionChange(function () {
                            me.isIndeterminate = me.store.selection.length != 0 && me.store.selection.length != me.store.data.length;
                            me.checked = me.store.selection.length == me.store.data.length;

                        });
                        setTimeout(function () {
                            var checkbox = me.$refs.for_header;
                            checkbox.$el.parentNode.removeChild(checkbox.$el);
                            checkbox.$el.style.display="block";
                            var header = table.$el.getElementsByClassName('ly-table-header')[0];
                            var first = header.childNodes[0];
                            header.insertBefore(checkbox.$el, first)
                        }, 200);
                    }
                }


            },
            data: function () {
                return {
                    checked: false,
                    isIndeterminate: false,
                    selection: false,
                    border: false,
                    selectionWidth: 32
                }
            }, methods: {
                handleCheckAllChange: function () {
                    var index = this.$parent.$children.indexOf(this);
                    var me = this;
                    if (index > 0) {
                        var table = this.$parent.$children[index - 1];
                        if (table.$options._componentTag == 'el-table') {
                            table.toggleAllSelection();
                        } else if (table.$options._componentTag == 'ly-table') {
                            _.each(table.data, function (item) {
                                Vue.set(item, '__checked', me.checked);
                            });
                            me.store.onItemCheckChange();
                        }

                    }
                }
            }
        }
    });
</script>
